<!--万能表单模块-->
<template>
  <div class="sea-box-group">

    <!-- 根节点是特殊的 -->
    <el-dropdown style="outline: none" :popper-options="popper_options">
        <span class="text-black" style="border: 0">
          <strong>{{ root.label }}</strong>
        </span>
      <template #dropdown>
        <el-dropdown-menu>
          <template v-for="(sub, i) in root.children" :key="i">
            <el-dropdown-item @click="getMenusList(sub)">{{ sub.label }}</el-dropdown-item>
          </template>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <!-- 菜单列表 -->
    <template v-for="(item, idx) in menus" :key="idx">
      <span>{{ separator }}</span>
      <el-dropdown style="outline: none" :popper-options="popper_options">
        <span class="text-black" style="border: 0">
          <strong>{{ item.label }}</strong>
        </span>
        <template #dropdown v-if="item.children">
          <el-dropdown-menu>
            <template v-for="(sub, i) in item.children" :key="i">
              <el-dropdown-item @click="getMenusList(sub)">{{ sub.label }}</el-dropdown-item>
            </template>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </template>
  </div>
</template>

<script>
import Bamboo from "@/lang/bamboo/index.js";
import TreeNode from "@/lang/bamboo/tree-node.js";

export default {
    components: {}
    , props: {
        // 数据字典
        options: {type: [Array, String], default: undefined}
        // 分隔符
        , separator: {type: String, default: '/'},
    }
    , data() {
        return {
            builder: Bamboo.builder(),
            tree: [],

            root: {},
            menus: [],
            // 弹窗配置，没这玩意儿会报错
            popper_options: {
                modifiers: [
                    {
                        name: 'computeStyles',
                        options: {gpuAcceleration: false, adaptive: false},
                    },
                ],
            }
        }
    },

    created() {
        let tree = this.builder
            .setMapper(Bamboo.defaultMapper).setList(this.options)
            .groupBy().getRoot();

        const root = new TreeNode();
        root.setLabel('ROOT');
        root.setChildren(tree);

        this.root = root;

        this.getMenusList(tree[0]);
    }

    , methods: {

        /**
         * 查找菜单列表
         *
         * @param menu 点击的节点
         */
        getMenusList(menu) {
            let node = this.builder.getNodeById(menu.id);
            let array = [node];
            while (true) {
                node = node.getParent();
                if (node !== undefined) {
                    array.push(node);
                } else {
                    break;
                }
            }
            array.reverse();

            this.menus = array;
        }
    }
}
</script>

<style scoped>

.el-dropdown,
.el-dropdown * {
    outline: none;
}

/* 或者针对特定的触发元素，如 el-dropdown-link */
.el-dropdown-link:focus-visible,
.el-dropdown-link:focus {
    outline: unset;
}
</style>